<template>
	<view class="pointsExchangeCenter">
		<view class="tabs">
			<view class="" @click="tabsActive=1">
				<view class="tab_name">发布需求</view>
				<view class="tab_underline">
					<view :class="{'active_color':tabsActive===1}"></view>
				</view>
			</view>
			<!-- 		<view class="" @click="tabsActive=3">
				<view class="tab_name">赠泌豆</view>
				<view class="tab_underline">
					<view :class="{'active_color':tabsActive===3}"></view>
				</view>
			</view> -->
			<view class="" @click="tabsActive=2">
				<view class="tab_name">兑换市场</view>
				<view class="tab_underline">
					<view :class="{'active_color':tabsActive===2}"></view>
				</view>
			</view>
		</view>

		<view class="publish_needs" v-if="tabsActive==1">
			<view class="input_list">
				<view class="">
					<view class="input_name">需要兑换泌豆数</view>
					<input type="number" placeholder="请输入兑换泌豆数" placeholder-class="placeholderStyle" v-model="grade">
				</view>
				<view class="">
					<view class="input_name">可兑换贡献值数量</view>
					<input type="number" placeholder="请输入可兑换贡献值数" placeholder-class="placeholderStyle" v-model="nums">
				</view>
				<view class="">
					<view class="input_name">联系方式</view>
					<input type="number" placeholder="请输入联系方式" placeholder-class="placeholderStyle" v-model="phone">
				</view>
			</view>
			<view class="btns">
				<view class="" @click="onPostDemand">发布需求</view>
				<!-- <view class="" @click="linkTo('exchangePoints')">直接输入ID兑换</view> -->
			</view>
		</view>
		<view class="list" v-if="tabsActive==2">
			<view class="item" v-for="(item,i) in list" :key="i">
				<view class="">
					<view class="needs_name">需要兑换泌豆数</view>
					<view class="needs_val">{{item.money}}</view>
				</view>
				<view class="" style="padding: 28upx 0;">
					<view class="needs_name">可兑换贡献值数量</view>
					<view class="needs_val">{{item.option_num}}</view>
				</view>
				<view class="" style="justify-content: space-between;align-items: center;">
					<view class="time">{{item.timetxt}}</view>
					<view class="tel" @click="callPhone(item.phone)">
						<image src="https://wx.2024csnl.com/static/holdshares/tel_btn.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
		</view>
		<view class="" v-if="tabsActive==3">
			<view class="friends-info">
				<view class="flex align info-item">
					<view class="info-label">赠送人ID</view>
					<input type="number" class="info-input" placeholder="请输入ID" v-model="userid">
				</view>

				<view class="flex align info-item">
					<view class="info-label">转赠泌豆数量</view>
					<input type="number" class="info-input" placeholder="请输入个数" v-model="giveNums">
				</view>
			</view>
			<button class="btn" @click="ongGiveFriends">确认转赠</button>
		</view>
		<pay-keyboard :show_key="show_pay_keyboard" @hideFun="hidePayKeyboard" :show_forget="true"
			@getPassword="getPayPassword"></pay-keyboard>
	</view>
</template>

<script>
	import {
		postDemand,
		reqDemandList,
		setGiveLiuTongZhi,
		checkpaypwdRequest
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				show_pay_keyboard: false,
				payPassword: '',
				userid: '',
				giveNums: '',
				tabsActive: 1,
				headHight: 0,
				grade: '', //分数
				nums: '',
				phone: '',
				pagenum: 1,
				list: [],
				noMoreData: false,
			};
		},
		onReachBottom() {
			this.pagenum += 1
			this.onReqDemandList('bottom')
		},
		watch: {
			tabsActive(newVal, oldVal) {
				// console.log(newVal,"djkdjd")
				if (newVal == 2) {
					this.list = []
					this.pagenum = 1
					this.onReqDemandList()
				}
			}
		},
		methods: {
			async showPayKeyboard() {
				this.show_pay_keyboard = true
			},
			hidePayKeyboard() {
				this.show_pay_keyboard = false
			},
			async getPayPassword(n) {
				console.log("用户输入的密码", n)
				this.payPassword = n.password;
				this.show_pay_keyboard = false
			
				const res = await checkpaypwdRequest('s=/ApiMy/checkpaypwd', {
					paypwd: this.payPassword
				})
				const {
					id,
					status,
					msg
				} = res.data
			
				if (status == 1) {
					await this.onSub()
				} else {
					this.showToast(msg)
				}
			},
			// 赠泌豆 接口还没有
			async onSub() {
				const res = await setGiveLiuTongZhi('s=/ApiZwyRequest/givefriends', {
					userid: this.userid,
					nums: this.giveNums
				})
				const {
					data,
					status,
					msg
				} = res.data
				console.log(res, "帮")
				this.showToast(msg)
				if (status == 1) {
					this.goBack(1500)
				}
			},
			ongGiveFriends() {
				switch (true) {
					case this.userid == '':
						this.showToast('请输入赠送人ID')
						break;
					case this.giveNums == '':
						this.showToast('请输入转赠泌豆数量~')
						break;
					default:
						this.showPayKeyboard();
						break;
				}
			},

			async onReqDemandList(type) {
				const res = await reqDemandList(`s=/ApiZwyRequest/needslist&pagenum=${this.pagenum}`)
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "帮")
				if (status == 1) {
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			// 发布需求
			async onSub() {
				const res = await postDemand('s=/ApiZwyRequest/needrelease', {
					money: this.grade,
					nums: this.nums,
					phone: this.phone
				})
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "帮-----")
				this.showToast(msg)
				if (status == 1) {
					this.goBack(1500)
				}
			},
			async onPostDemand() {
				switch (true) {
					case this.grade == '':
						this.showToast('请输入兑换泌豆数')
						break;
					case this.grade <= 0:
						this.showToast('兑换泌豆数需大于0')
						break;
					case this.nums == '':
						this.showToast('请输入可兑换贡献值数')
						break;
					case this.nums <= 0:
						this.showToast('可兑换贡献值数需大于0')
						break;

					case (!/^1[3456789]\d{9}$/.test(this.phone)):
						this.showToast('请输入正确联系方式')
						break;
					default:
						this.onSub()
				}
			},
			linkTo(url) {
				uni.navigateTo({
					url: `/pages/holdshares/${url}/${url}`
				})
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.float === "right") {
				this.$toPage('/pages/holdshares/myPublishNeeds/myPublishNeeds')
			}
		},
	}
</script>

<style lang="scss">
	.friends-info {
		margin: 20rpx 0;
		background-color: #FFF;
		line-height: 93rpx;
		font-size: 29rpx;

		.info-item {
			margin: 0 30rpx;

			.info-label {
				min-width: 200rpx;
			}

			.info-input {
				flex: 1;
				font-size: 27rpx;
				text-align: right;
			}
		}
	}

	.btn {
		margin: 98rpx 20rpx;
		background-color: #41644A;
		color: #FFF;
		line-height: 88rpx;
		border-radius: 20rpx;
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.pointsExchangeCenter {
		padding-top: 124upx;

		.tabs {
			height: 124upx;
			width: 100%;
			position: fixed;
			//  #ifdef APP-PLUS
			top: 0; //新增
			// #endif 
			// #ifdef H5
			top: 90rpx;
			// #endif 
			left: 0;
			z-index: 99;
			padding: 0 60upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f7f7f7;

			>view {
				.tab_name {
					font-size: 34upx;
					color: #1B1B1B;
					margin-bottom: 20upx;
				}

				.tab_underline {
					display: flex;
					justify-content: center;

					>view {
						width: 52upx;
						height: 10upx;
						border-radius: 4upx;
					}

					.active_color {
						background-color: #41644A;
					}
				}
			}
		}

		.publish_needs {

			// margin-top: 100rpx;
			.input_list {
				background-color: #fff;
				margin-bottom: 52upx;

				>view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32upx 40upx 32upx 30upx;
					box-sizing: border-box;
					border-bottom: 1upx solid #F7F7F7;

					.input_name {
						font-size: 30upx;
					}

					input {
						font-size: 26upx;
						flex: 1;
						margin-left: 20upx;
						text-align: right;
					}

					.placeholderStyle {
						color: #B3B3B3;
					}
				}
			}

			.btns {
				padding: 0 20upx;
				box-sizing: border-box;

				>view {
					width: 100%;
					height: 86upx;
					border-radius: 14upx;
					line-height: 86upx;
					text-align: center;
					color: #fff;
					background-color: #41644A;
					font-size: 32upx;
					margin-bottom: 40upx;
				}
			}
		}

		.list {
			.item {
				padding: 40upx 30upx 32upx 32upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #f7f7f7;

				>view {
					display: flex;
					align-items: center;
					font-size: 28upx;
					line-height: 28upx;
					font-weight: 400;

					.needs_val {
						color: #41644A;
						margin-left: 20upx;
					}

					.time {
						font-size: 24upx;
						color: #999999;
					}

					.tel {
						image {
							width: 184upx;
							height: 50upx;
						}
					}
				}
			}
		}
	}
</style>